<!DOCTYPE html>
<html lang="en">
  <head>
    <title>公式编辑器</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <link rel="stylesheet" href="assets/styles/page.css" />
    <link rel="stylesheet" href="assets/styles/base.css" />
    <link rel="stylesheet" href="assets/styles/ui.css" />
    <link rel="stylesheet" href="assets/styles/scrollbar.css" />
  </head>
  <body>
    <div id="kfEditorContainer" class="kf-editor" style="width: 100%; height: 100%"></div>
  </body>
  <script src="dev-lib/jquery-1.11.0.min.js"></script>
  <script src="dev-lib/kitygraph.all.js"></script>
  <script src="dev-lib/kity-formula-render.all.js"></script>
  <script src="dev-lib/kity-formula-parser.all.min.js"></script>
  <script src="dev-lib/dev-define.js"></script>
  <script src="dev-lib/exports.js"></script>
  <script src="dev-lib/start.js"></script>
  <script src="dev-lib/dev-start.js"></script>
  <script>
    //获取url地址栏传参
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1)
      var vars = query.split('&')
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=')
        if (pair[0] == variable) {
          return pair[1]
        }
      }
      return false
    }
    //处理TinyMCE编辑器的事件
    window.addEventListener('message', function (event) {
      kfe.execCommand('get.image.data', function (data) {
        var latex = kfe.execCommand('get.source')
        var cmd = ''
        switch (event?.data) {
          case 'save_inline_formula':
            var cmd ='inlineFormulaInsertContent';
            break;
          case 'save_variable_formula':
            var cmd ='variableFormulaInsertContent';
            break;
          case 'save_variable_inline_formula':
            var cmd ='variableInlineFormulaInsertContent';
            break;
          default:
            var cmd = 'formulaInsertContent'   
            break;
        }
        // var cmd = event?.data === 'save_inline_formula' ? 'inlineFormulaInsertContent' : 'formulaInsertContent'   
        window.parent.postMessage({ mceAction: 'execCommand', cmd, value: { data, latex } }, '*')
        window.parent.postMessage({ mceAction: 'close' }, '*')
      })
    })

    var sendId = undefined
    jQuery(function ($) {
      var factory = kf.EditorFactory.create($('#kfEditorContainer')[0], {
        render: {
          fontsize: 40
        },
        resource: {
          path: 'resource/'
        }
      })

      factory.ready(function (KFEditor) {
        var c = getQueryVariable('c')
        window.kfe = this
        setlatex(c ? decodeURIComponent(c) : '')
        // 向父窗口发送消息
        sendPost({ ready: true })
      })
    })

    function sendPost(data) {
      const parentWindo = window.parent
      data.id = sendId
      if (parentWindo) {
        window.parent.postMessage(data, '*')
      }
    }

    function setlatex(latex) {
      try {
        window.kfe.execCommand('render', latex || '\\placeholder')
        !latex && window.kfe.execCommand('focus')
      } catch (e) {
        console.log('setlatex error', e)
      }
    }
  </script>
</html>
